<template>
  <div class="ui-pagination-id">
    <span>当前第{{pageNumber}}页，每页{{pageSize}}条</span>
    <el-button type="primary" icon="arrow-left" size="small" @click="handlePrev">上一页</el-button>
    <el-button type="primary" size="small" @click="handleNext">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
  </div>
</template>

<script>
    export default {
      name: 'pagination-id',
      props: ['pageNumber'],
      data () {
        return {
          c: 0,
          msg: 'I am from child\'s data',
          minId: 0,
          maxId: 0,
          length: 1,
          pageSize: 10,
          isActive: true,
          error: null
        }
      },
      computed: {
        classPrevObj: function () {
          return {
            'no-prev': this.pageIndex === 1,
            'btn': !(this.pageIndex === 1)
          }
        },
        classNextObj: function () {
          return {
            'no-next': this.length < this.pageSize,
            'btn': !(this.length < this.pageSize)
          }
        }
      },
      methods: {
        handlePrev () {
          window.console.log('handlePrev++++++++++++++++++++++++++++++++++++++')
          this.$emit('handlePrev')
        },
        handleNext () {
          window.console.log('handleNext++++++++++++++++++++++++++++++++++++++')
          this.$emit('handleNext')
        }
      }
    }
</script>

<style>
  .ui-pagination-id {
    margin-top: 1rem;
    text-align: center;
  }
  .ui-pagination-id > a {
    display: inline-block;
    padding: 6px 9px;
    line-height: 1.2rem;
    color: #000;
    font-size: 1.2rem;
    border: 1px solid #dddddd;
    margin: 0 2px;
  }

  .ui-pagination-id > a.hide {
    display: none;
  }

  .ui-pagination-id > .no-prev,
  .ui-pagination-id > .no-next {
    color: #a3a3a3;
    border: 1px solid #eee;
    background: #f3f3f3;
  }

  .ui-pagination-id > .btn:hover {
    color: #fff;
    border: 1px solid #00a5ed;
    background: #00a5ed;
  }
</style>
